<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      #echarts {
        height: 600px;
      }
    </style>
  </head>
  <body>
    <div id="echarts"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
    <script>
      let echartsDiv = document.getElementById('echarts')
      let echart = echarts.init(echartsDiv)
      const data = [
        ['北京', 18000, 12000, 20, 'x', 200],
        ['上海', 15000, 5000, 30, 'y', 200],
        ['广州', 10000, 17000, 80, 'z', 300],
        ['深圳', 16000, 9000, 30],
        ['武汉', 13000, 6000, 90]
      ]
      echart.setOption({
        title: {
          text: '多种图状',
          left: 'left'
        },
        dataset: {
          source: data
        },
        legend: {
          data: ['zhu', 'xian', 'bing']
        },
        xAxis: {
          type: 'category'
        },
        yAxis: {
          axisLine: {
            show: true
          }
        },
        tooltip: {},
        toolbox: {
          feature: {
            dataView: {},
            restore: {},
            saveAsImage: {},
          }
        },
        series: [
          {
            name: 'zhu',
            type: 'bar',
            encode: {
              y: 2
            },
            z: 1
          },
          {
            name: 'xian',
            type: 'line',
            encode: {
              y: 1
            }
          },
          {
            name: 'bing',
            type: 'pie',
            width: 200,
            height: 200,
            left: 'center',
            encode: {
              itemName: 4,
              value: 5
            },
            z: 2,
            label: {
              overflow: 'break'
            }
          }
        ],
        grid: {
          left: 80,
          right: 80
        },
        dataZoom: {}
      })
    </script>
  </body>
</html>
